<template>
  <div>
    <div class="search">
      <input type="text" name="text" class="input" placeholder="搜索文章标题" v-model="whereType.title">
      <button @click="open4">
        搜索文章
      </button>
    </div>
    <div class="articleList">
      <article-list :whereType="whereType"></article-list>
    </div>
  </div>
</template>

<script>
import { ElMessage } from 'element-plus'
import { toRefs, reactive, onMounted, provide, ref } from "vue"
import ArticleList from '@/components/articleList/ArticleList.vue'
export default {
  components: { ArticleList },
  name: 'HomeSearch',
  setup (props) {
    const data = reactive({
      whereType: { title: '' }
    })
    onMounted(() => {
      document.querySelector('.input').focus()
    })
    const open4 = () => {
      ElMessage.error('下面没有就真的没有了')
    }
    return {
      ...toRefs(data),
      open4
    }
  }
}
</script>
<style lang="scss" scoped>
.articleList {
  max-width: 1000px;
  margin: auto;
  min-height: 500px;
}
.search {
  position: relative;
  max-width: 1000px;
  transform: translateY(-100px);
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  button {
    background: #fbca1f;
    font-family: inherit;
    padding: 5px 10px;
    margin-left: 20px;
    font-weight: 900;
    font-size: 16px;
    border: 3px solid black;
    border-radius: 15px;
    box-shadow: 0.1em 0.1em;
  }

  button:hover {
    transform: translate(-0.05em, -0.05em);
    box-shadow: 0.15em 0.15em;
  }

  button:active {
    transform: translate(0.05em, 0.05em);
    box-shadow: 0.05em 0.05em;
  }
}
/* From uiverse.io by @Galahhad */
.input {
  top: -50px;
  left: 0;
  background-color: #383838;
  border: 1ex solid none;
  border-top-width: 1.7em;
  margin: 0;
  padding: 0;
  color: #383838;
  word-wrap: break-word;
  outline: 7px solid #383838;
  height: 30px;
  font-size: 17px;
  text-align: center;
  transition: all 1s;
  flex: 1;
  font-weight: bold;
  font-family: "Courier New", Courier, monospace;
}

.input:hover {
  border-top-width: 0.2em;
  background-color: #f1e8e8;
}

.input:focus {
  border-top-width: 0.2em;
  background-color: #f1e8e8;
}
</style>